import React, {Component} from 'react';
import axios from "axios";
import './css/film.css'

class Film extends Component {
    render() {
        return <div>
            <div className="film">
                <img onClick={() => this.props.onEvent(this.props.synopsis)}
                     src={this.props.poster}
                     alt={this.props.name}/>
                <span>{this.props.name}</span>
            </div>
        </div>
    }
}

class App extends Component {
    constructor(props) {
        super(props);
    }

    // dom节点挂载完成后再获取数据
    componentDidMount() {
        axios.get("/test.json").then(res => {
            this.setState({list: res.data.data.films})
        })
    }

    state = {
        list: [],
        content: ''
    }

    render() {
        return (<div>
            {
                this.state.list.map(item =>
                    <Film key={item.filmId}
                          {...item}
                          onEvent={res => this.setState({content: res})}>
                    </Film>)
            }
            <FilmDetail content={this.state.content}></FilmDetail>
        </div>);
    }
}

class FilmDetail extends Component {
    render() {
        return <div className="filmDetail">
            {this.props.content}
        </div>
    }
}

export default App;